<template>
  <div class="userManagement-container view flex-row">
    <div
      class="m-r-15 minw300"
      style="border: 1px solid #ebeef5; padding: 10px; border-radius: 5px"
    >
      <el-button
        :type="isCheck ? 'primary' : ''"
        class="m-b-10"
        size="mini"
        :icon="isCheck ? 'el-icon-star-on' : 'el-icon-star-off'"
        @click="checkToGroup"
      >
        总分组
      </el-button>
      <tree
        :nodes="nodes"
        ref="treeAuth"
        @onClick="selectTree"
        :setting="setting"
        @onCreated="handleCreated"
      />
    </div>

    <div class="width100">
      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item>
          <el-radio-group v-model="queryForm.jiedan">
            <el-radio :label="1">日结单</el-radio>
            <el-radio :label="2">月结单</el-radio>
            <el-radio :label="3">指定周期</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="queryForm.jiedan == 1"
          label="日结单"
          class="m-l-30"
        >
          <el-date-picker
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            v-model="queryForm.day"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          v-if="queryForm.jiedan == 2"
          label="月结单"
          class="m-l-30"
        >
          <el-date-picker
            :format="`M月`"
            :picker-options="pickerOptions"
            v-model="queryForm.month"
            value-format="M"
            type="month"
            placeholder="选择月份"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          label="指定周期"
          v-if="queryForm.jiedan == 3"
          class="m-l-30"
        >
          <el-date-picker
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            v-model="queryForm.startday"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择开始日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="-" v-if="queryForm.jiedan == 3">
          <el-date-picker
            v-model="queryForm.endday"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择结束日期时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="fetchData">
            查询
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="expor">导出</el-button>
        </el-form-item>
      </el-form>
      <el-card shadow="never" class="box-card" :body-style="{ padding: '0px' }">
        <div slot="header" class="clearfix">
          <span>资金信息</span>
        </div>

        <el-table
          v-loading="listLoading"
          :data="tableData1"
          style="width: 100%"
        >
          <el-table-column
            prop="bz"
            align="center"
            label="币种"
          ></el-table-column>
          <el-table-column
            prop="startdeposit"
            align="center"
            label="期初结存"
          ></el-table-column>
          <el-table-column
            prop="equity"
            align="center"
            label="客户权益"
          ></el-table-column>
          <el-table-column
            prop="availablefunds"
            align="center"
            label="可用资金"
          ></el-table-column>
          <el-table-column
            prop="margins"
            align="center"
            label="保证金占用"
          ></el-table-column>
          <el-table-column
            prop="dsfunds"
            align="center"
            label="出入金"
          ></el-table-column>
          <el-table-column
            prop="fees"
            align="center"
            label="手续费"
          ></el-table-column>
          <el-table-column
            prop="yk"
            align="center"
            label="总盈亏"
          ></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {
    getList,
    doDelete,
    getUserlist,
    userfunds,
    onlineorders,
    wtorders,
    dsfunds,
    exportData,
  } from '@/api/userManagement'
  import { getGrouplist } from '@/api/ad'
  import Edit from './components/UserManagementEdit'
  import tree from 'vue-giant-tree'
  export default {
    name: 'ReportManagement',
    components: { Edit, tree },
    data() {
      let that = this
      return {
        activeName: '1',
        list: null,
        isCheck: false,
        value1: '',
        nodes: [],
        grouplist: [],
        ztreeObj: null,
        setting: {
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
          },
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        options: [
          {
            value: 1,
            label: '逐笔',
          },
          {
            value: 2,
            label: '盯市',
          },
        ],

        tableData1: [],

        tableData: [],
        listLoading: false,
        layout: 'total, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        groupid: 1,
        queryForm: {
          startday: '',
          endday: '',
          page: 1,
          jiedan: 1,
          month: '',
          day: that.$dayjs().format('YYYY-MM-DD'),
          uid: '',
          isall: '0',
          extype: 1,
        },
      }
    },
    created() {
      this.getGroupListData()
    },
    methods: {
      async expor() {
        this.queryForm.isall = this.isCheck ? '1' : '0'
        let loadingInstance = this.$loading({ fullscreen: true })
        let query = { ...this.queryForm }
        if (query.jiedan == 1) {
          query.startday = ''
          query.endday = ''
          query.month = ''
        } else if (query.jiedan == 2) {
          query.startday = ''
          query.endday = ''
          query.day = ''
        } else if (query.jiedan == 3) {
          query.day = ''
          query.month = ''
        }
        const res = await exportData(query)
        loadingInstance.close()
        if (res.code == 1) {
          window.open(res.data.downurl)
        } else {
          this.$baseMessage(res.msg, 'error')
        }
      },
      checkToGroup() {
        this.isCheck = !this.isCheck
        this.fetchData()
      },
      getUserfunds() {
        this.listLoading = true
        this.queryForm.isall = this.isCheck ? '1' : '0'
        let query = { ...this.queryForm }
        if (query.jiedan == 1) {
          query.startday = ''
          query.endday = ''
          query.month = ''
        } else if (query.jiedan == 2) {
          query.startday = ''
          query.endday = ''
          query.day = ''
        } else if (query.jiedan == 3) {
          query.day = ''
          query.month = ''
        }
        userfunds(query)
          .then((res) => {
            this.listLoading = false
            let arr = []
            for (let k in res.data) {
              arr.push(res.data[k])
            }
            this.tableData1 = arr
            this.listLoading = false
          })
          .catch((ret) => {
            this.listLoading = false
          })
      },
      selectTree() {
        this.isCheck = false
        let node = this.ztreeObj.getSelectedNodes()[0]
        if (node.id.indexOf('userid_') > -1) {
          this.queryForm.uid = node.id.replace('userid_', '')
          this.fetchData()
          return false
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      changeTab() {
        this.fetchData()
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj
        ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
        if (this.ztreeObj.getNodes()[0]) {
          if (this.ztreeObj.getNodes()[0].children) {
            let it = this.ztreeObj.getNodes()[0].children[0]
            this.queryForm.uid = it.id.replace('userid_', '')
            if (it) {
              this.ztreeObj.selectNode(it, true)
            }
          }

          this.fetchData()
        }
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      getGroupListData() {
        getGrouplist({})
          .then((res) => {
            this.nodes = res.data.map((item, index) => {
              let datac = {}
              if (index == 0) {
                datac.pid = 0
                datac.open = true
              }
              datac.id = item.id
              datac.name = item.gname
              return datac
            })
            this.grouplist = res.data
            this.getUsers()
          })
          .catch((ret) => {
            console.log(ret)
          })
      },
      // async getUsers() {
      //   for (let i = 0; i < this.grouplist.length; i++) {
      //     const res = await getUserlist({ groupid: this.grouplist[i].id })
      //     this.$set(this.grouplist[i], 'child', res.data)
      //   }
      // },
      async getUsers() {
        this.grouplist.forEach(async (dc) => {
          const res = await getUserlist({ groupid: dc.id })
          const maps = res.data.map((item) => {
            item.name = item.username
            item.id = `userid_${item.id}`
            item.pid = dc.id
            item.url = ''
            return item
          })
          this.nodes.push(...maps)
        })
      },

      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.page = 1
        this.fetchData()
      },
      getChichang() {
        onlineorders(this.queryForm)
          .then((res) => {
            this.tableData = res.data.list
            this.total = res.data.total
          })
          .catch((ret) => {})
      },
      getWT() {
        wtorders(this.queryForm)
          .then((res) => {
            this.tableData = res.data
          })
          .catch((ret) => {})
      },
      getChuRuJin() {
        dsfunds(this.queryForm)
          .then((res) => {
            this.tableData = res.data
          })
          .catch((ret) => {})
      },
      async fetchData() {
        this.getUserfunds()
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .report-content {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .box-card-outer {
    border-top: 0 !important;
    .el-card {
      border-top: 0 !important;
    }
  }
  ::v-deep .box-card-no-padding {
    .el-card__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .minw300 {
    min-width: 100px;
  }
</style>
